<template>
  <div class="outer-container" v-if="stats && !loading" style="height: 100%;">
    <div class="top-container" style="display: flex; height: 100%; flex-direction: column; gap:20px;">
      <div style="">
        <el-space wrap style="float:right">
          <el-input v-model="id" style="width: 240px" placeholder="手机号/银行卡号/商户编号" />
          <el-button :icon="Search" @click="showUser">查用户</el-button>
          <el-button :icon="Search" @click="showMcht">查商户</el-button>
        </el-space>
      </div>
      <div style="">
        <Stat :data="stats"></Stat>
      </div>
      <!-- <div style="display: flex; gap: 20px">
        <Box1 style="width: 50%;" title="用户风险趋势">
          <Line style="height: 200px;"></Line>
        </Box1>
        <Box1 style="width: 50%;" title="商户风险趋势">
          <Line1 style="height: 200px;"></Line1>
        </Box1>
      </div> -->
      <div style="display: flex; flex: 1; gap: 10px">
        <div style="width: 35%; display: flex; flex-direction: column;">

          <Box1 title="用户场景画像统计（卡/月/场景粒度）" style="height: 35%;">
            <Bar style=""
              :data="Object.keys(scenarios).slice(0, 3).map(s => ({ year: scenarios[s], value: stats[s] }))">
            </Bar>
          </Box1>
          <div style="flex: 1;">
            <Ring title="标签场景分布"
              :data="Object.keys(scenarios).map(s => ({ type: scenarios[s], value: scenarioStat[scenarios[s]] }))"
              style="margin: 0 auto;">
            </Ring>
          </div>
        </div>
        <Map></Map>
        <div style="width: 35%; display: flex; flex-direction: column;">

          <Box1 title="商户场景画像统计（月/场景粒度）" style="height: 35%;">
            <Bar style=""
              :data="Object.keys(scenarios).slice(3, 6).map(s => ({ year: scenarios[s], value: stats[s] }))">
            </Bar>
          </Box1>
          <!-- <Ring title="商户标签分布"
            :data="Object.keys(scenarios).slice(3, 6).map(s => ({ type: scenarios[s], value: scenarioStat[scenarios[s]] }))"
            style="margin: 0 auto;">
          </Ring> -->
          <Ring title="标签类型分布" :data="labelCountData" style="margin: 0 auto;">
          </Ring>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import Box1 from '@/components/Box1.vue'
import Stat from './components/Stat.vue'
import Ring from './components/Ring.vue'
import Bar from './components/Bar.vue'
import Line from './components/Line.vue'
import Line1 from './components/Line1.vue'
import Map from './components/Map.vue'
import { useRouter } from 'vue-router'
import { nebulaExec } from '@/utils/request'
import { sum, zip, zipObject } from 'lodash'
import { useMetaStore } from '@/stores/meta'



const router = useRouter()

const loading = ref(true)
const id = ref('')
const stats = ref(null)

function showUser() {
  router.push(`/user/${id.value}`)
}

function showMcht() {
  router.push(`/merchant/${id.value}`)
}

const scenarios = {
  'gambling_card': '赌博违规',
  'card_weimao_label': '伪冒注册',
  'abnorm_trans_card': '异常转账',
  'abnorm_hn_mchnt': '黄牛营销',
  'mcht_taoxian_label': '团伙套现',
  'mchnt_label': '商户违规',
}

const scenarioStat = ref({})
const labelCount = ref(0)
const labelCountData = ref([])

async function fetchData() {
  const resp = await nebulaExec('show stats')
  stats.value = zipObject(resp.Name, resp.Count)

  const promises = Object.keys(scenarios).map((s) =>
    nebulaExec(`desc edge ${s}`),
  )
  const resps = await Promise.all(promises)
  const data = {}
  resps.forEach((resp, idx) => {
    console.log(resp.Field.length)
    data[Object.values(scenarios)[idx]] = resp.Field.length
  })
  scenarioStat.value = data
  labelCount.value = sum(Object.values(scenarioStat.value))
  labelCountData.value = [{ type: '智能类', value: 66 }, { type: '一般规则类', value: labelCount.value - 118 }, { type: '统计类', value: 52 }]

  loading.value = false
}

fetchData()
// useMetaStore().$subscribe((mutation, state) => {
//   labelCountData.value = [{ type: '智能类', value: 66 }, { type: '一般规则类', value: 62 }, { type: '统计类', value: state.labelCount - 128 }]
// })
</script>

<style scoped>
.outer-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 60px 20px;
  height: 100%;
}

.top-container {
  flex: 0 1 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.bottom-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-bottom: 80px; */
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>
